// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/modal';
@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
@import '~@mozilla-protocol/core/protocol/css/components/zap';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-mozilla';
@import '../../protocol/components/video';

// Play button on videos
.mzp-c-card-media-wrapper {
    &::after {
        background: url('/media/img/icons/video-play.svg') top left no-repeat;
        content: '';
        height: 100px;
        left: 50%;
        margin: -50px 0 0 -50px;
        opacity: 0.7;
        position: absolute;
        top: 50%;
        transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
        width: 100px;
        z-index: 2;
    }

    &:hover::after,
    &:focus::after {
        opacity: 1;
        transform: scale(1.1);
    }
}
